/*
 * icenter page
**/
<template>
<div>
<!-- <div class="weui-panel weui-panel_access">
  <div class="weui-panel__bd">
    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
      <div class="weui-media-box__hd">
        <img class="weui-media-box__thumb" src="../../assets/imgs/avatar.jpg" alt="">
      </div>
      <div class="weui-media-box__bd">
        <h4 class="weui-media-box__title">七痴</h4>
        <p class="weui-media-box__desc">没兴趣 生性冷淡</p>
      </div>
    </a>
  </div>
  <div class="weui-panel__ft">
    <div class="weui-form-preview__ft">
        <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">关注</a>
        <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">粉丝</button>
    </div>
  </div>
</div> -->
<div class="page__bd">
  <div class="info-tips">我们会根据您的兴趣，推送给您精彩内容。</div>
  <div class="info-content">
    <div class="form-item">
      <label>您的性别：</label>
      <div class="form-item-content">
        <span class="form-radio"><input type="radio" v-model="form.sex" value="1"><label>男</label></span>
        <span class="form-radio"><input type="radio" v-model="form.sex" value="2"><label>女</label></span>
      </div>
    </div>
    <div class="form-item">
      <label>您的年龄：</label>
      <div class="form-item-content">
        <select v-model="form.birthday" placeholder="年龄" v-if="yearList.length" class="ui-select">
          <option value="">---请选择---</option>
          <option v-for="item in yearList" :value="item">{{item}}</option>
        </select>
      </div>
    </div>
    <div class="form-item">
      <label>您想看到的内容：<span>（支持多选）</span></label>
      <div class="form-item-content form-item-checkbox">
        <span class="form-checkbox" v-for="item in interestList"><input type="checkbox" v-model="form.interest" :value="item.cid"><label>{{item.title}}</label></span>
      </div>
    </div>
  </div>
</div>
<div class="quick-footernav" style="background:transparent; border:none;"><span class="ui-btn" @click="trySubmit">&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;</span></div>
<modal-dialog ref="dialog"></modal-dialog>
<div class="mod-footer-place"></div>
</div>
</template>
<script>
import vTab from 'components/common/tab'
import {userPersonality, userSetPersonality} from 'src/service/getData'
import modalDialog from 'src/components/dialog'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      yearList: [],
      interestList: [], // 兴趣列表
      form: {
        sex: '',
        birthday: '',
        interest: []
      }
    }
  },
  computed: {
    ...mapState([
      'I9RIA'
    ])
  },
  components: {
    'v-tab': vTab, modalDialog
  },
  mounted () {
    if (this.I9RIA && this.I9RIA.wxJsApiConf) {
      this.initYear()
      this.initData()
    }
  },
  methods: {
    initYear () {
      let date = new Date()
      let year = date.getFullYear()
      let tmpArray = []
      for (var i = 0; i < 100; i++) {
        tmpArray[i] = year - i
      }
      this.yearList = tmpArray
    },
    async initData () {
      let res = await userPersonality()
      console.log(res)
      let tmpArr = []
      for (var i = 0; i < res.data.industries.length; i++) {
        if (res.data.industries[i].is_select) {
          tmpArr[tmpArr.length] = res.data.industries[i].cid
        }
      }
      this.form.sex = res.data.sex
      this.form.birthday = res.data.birthday
      this.form.interest = tmpArr
      this.interestList = res.data.industries
    },
    trySubmit () {
      if (!this.form.sex) {
        this.$refs.dialog.confirm('<p class="tc">请设置你的性别</p>', {
          type: 'toast'
        })
        return
      }
      if (!this.form.birthday) {
        this.$refs.dialog.confirm('<p class="tc">请选择你的年龄</p>', {
          type: 'toast'
        })
        return
      }
      if (!this.form.interest.length) {
        this.$refs.dialog.confirm('<p class="tc">请选择你想看的内容</p>', {
          type: 'toast'
        })
        return
      }
      this.userSetPersonality()
    },
    async userSetPersonality () {
      console.log(this.form.interest)
      let res = await userSetPersonality(this.form.birthday, this.form.sex, this.form.interest)
      console.log(res)
      if (res.code === 0) {
        this.$refs.dialog.confirm(`<div><h3>${res.msg}</h3></div>`, {
          type: 'tips'
        }).then(() => {
          this.$router.push('/index')
        })
      } else {
        this.$refs.dialog.confirm(`<p>${res.msg}</p>`, {
          type: 'toast'
        })
      }
    }
  },
  watch: {
    I9RIA (res) {
      let val = res || {}
      if (val && val.wxJsApiConf) {
        this.initYear()
        this.initData()
      }
      if (val.code === 9999) {
        this.$router.push('/404')
      }
    }
  }
}
</script>
<style scoped>
.info-tips{width:100%; line-height:.32rem; padding:.05rem 0 0; font-size:.12rem; text-indent:.1rem;}
.info-content{background:#fff; padding:.08rem .1rem;}
.form-item{overflow:hidden; padding:.08rem 0; font-size:.14rem; line-height:.22rem;}
.form-item > label{float:left; color:#333;}
.form-item > label span{color:#999; font-size:.10rem;}
.form-item-content{color:#ffa200;}

.form-radio{position:relative; display:inline-block; padding-right:.26rem; padding-left:.2rem;}
.form-radio input{position:absolute; left:0; top:0; z-index:10; width:.22rem; height:.22rem; opacity:0;}
.form-radio label:before,
.form-radio label:after{ content:''; position:absolute; left:0; top:.03rem; display:inline-block; border-radius:50%;}
.form-radio label:before{ width:.16rem; height:.16rem; border:.02rem solid rgba(255,162,0,.55);}
.form-radio input:checked + label:before{ border:.02rem solid rgba(255,162,0,1);}
.form-radio input:checked + label:after{ margin-left:.05rem; margin-top:.05rem; width:.06rem; height:.06rem; background:#ffa200; border-radius:50%;}
.ui-select{height:.22rem; line-height:.22rem; padding:0 .32rem 0 .1rem; background-color:#fff; border:.01rem  solid #ffa200; border-radius:.05rem; color:#ffa200; vertical-align:middle; text-align:center;}
:-webkit-any(.ui-select){height:.22rem; line-height:.22rem; -webkit-appearance:none; background:url(../../assets/imgs/icon-select.png) no-repeat 100% 50%; background-size:.20rem auto}
.form-item-checkbox{float:left; margin:0 -.05rem;}
.form-checkbox{position:relative; width:25%; padding:.08rem .05rem .06rem .05rem; display:inline-block;}
.form-checkbox label{display:inline-block; width:100%; text-align:center; background:#fff; border:.01rem solid #ffa200; border-radius:.05rem; font-size:.12rem;}
.form-checkbox input{position:absolute; width:.7rem; height:.22rem; opacity:0;}
.form-checkbox input:checked + label{background:#ffa200; color:#fff;}
</style>
